<template>
	<t-modal :title="title" :width="640" :visible="visible" :switchFullscreen="true" :confirmLoading="loading" @ok="
      () => {
        $emit('ok');
      }
    " @cancel="
      () => {
        $emit('cancel');
      }
    ">
		<a-spin :spinning="loading">
			<a-form :form="form">
				<a-row :gutter="16">
					<a-form-item class="hiddenItem">
						<!-- uuid隐藏 -->
						<a-input v-decorator="['uuid']" disabled type="hidden" />
					</a-form-item>
					<a-col class="gutter-row" :span="24">
						<a-form-item :label="$ct('databaseFieldType','数据库字段类型')" :labelCol="labelCol" :wrapperCol="wrapperCol">
							<a-input v-decorator="['filedType']" />
						</a-form-item>
					</a-col>
					<a-col class="gutter-row" :span="24">

						<a-form-item :label="$ct('databaseType','数据库类型')" :labelCol="labelCol" :wrapperCol="wrapperCol">
							<TDictSelectTag
								placeholder="请选择数据库类型"
								dataType="static"
								textFeild="label"
								valueFeild="value"
								:dataList="databaseTypeList"
								v-decorator="['databaseType']">
							</TDictSelectTag>
						</a-form-item>
					</a-col>
					<a-col class="gutter-row" :span="24">
						<a-form-item :label="$ct('javaFieldType','java字段类型')" :labelCol="labelCol" :wrapperCol="wrapperCol">
							<a-input v-decorator="['javaType']" />
						</a-form-item>
					</a-col>
					<a-col class="gutter-row" :span="24">
						<a-form-item :label="$ct('	javaPackageName','系统包名')" :labelCol="labelCol" :wrapperCol="wrapperCol">
							<a-input v-decorator="['javaPackageName']" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-spin>
	</t-modal>
</template>

<script>
	import pick from "lodash.pick";
	// 表单字段
	const fields = [
		"uuid",
		"filedType",
		"javaType",
		"databaseType",
		"javaPackageName",
	];
	import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";

	export default {
		props: {
			visible: {
				type: Boolean,
				required: true,
			},
			loading: {
				type: Boolean,
				default: () => false,
			},
			model: {
				type: Object,
				default: () => null,
			},
		},
		components: {
			TDictSelectTag,
		},
		data() {
			return {
				title: "",
				labelCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 5,
					},
				},
				wrapperCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 16,
					},
				},
				databaseTypeList: [{
					value: 'MySQL',
					id: 1,
					label: 'MySQL'
				}, {
					value: 'Oracle',
					id: 1,
					label: 'Oracle'
				}, {
					value: 'SqlServer',
					id: 1,
					label: 'SqlServer'
				}, {
					value: 'PostgreSQL',
					id: 1,
					label: 'PostgreSQL'
				}, {
					value: '达梦',
					id: 1,
					label: '达梦'
				}],
				form: this.$form.createForm(this),
			};
		},
		methods: {
			add(m, data) {
				console.log(m, data);
			},
			edit(m, data) {
				console.log(m, data);
			},
		},
		created() {
			// 防止表单未注册
			fields.forEach((v) => this.form.getFieldDecorator(v));
			// 当 model 发生改变时，为表单设置值
			this.$watch("model", () => {
				this.model && this.form.setFieldsValue(pick(this.model, fields));
			});
		},
	};
</script>
